
@import '../variables.scss';

.MatcDialog.MatchImportDialog.MatchImportOpenAIDialog {
    width: 720px;
    height: 640px;  
    
  
    .MatchImportOpenAIDialogWarn {
        padding: 16px;
        background: #f9ed8371;
        border: 1px solid #f9ed83;
        border-radius: 4px;
    }

    .MatchImportOpenAIDialogWaiting {
      display: flex;
      flex-direction: column;
      gap: 48px;
      align-items: center;
      padding-top: 32px;

      .MatcHintCntr {
        width: 80%;
      }

      .MatcHint {
        width: 100%;
      }

      .MatchImportDialogProgressCntr {
        display: block;
        width: 100%;
        height: 16px;
        overflow: hidden;
        
      }
    
      .MatchImportDialogProgress {
        height: 100%;
        width: 100%;
        background: $main_color;
        border-radius: 16px;
  
        animation-name: aiRunning;
        animation-duration: 60s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      .MatchImportOpenAIDialogHint {
        border-radius: 4px;
        padding: 32px;
        background: #d6e5f884;
        color: #172b7f;
        width: 100%;

  
        h1 {
          font-size: 16px;
          font-weight: 700;
          text-align: center;
          margin-bottom: 32px;
        }

        p {
          font-style: italic;
          margin-top: 16px;
        }
      }
    }

  

    .MatcError {
        margin-top: 16px;
        height: 32px;
    }
  
    textarea {
      height: 100%;
    }
  
    .VommondRadioBoxList > div {
      display: flex;
      flex-direction: column;
  
      .VommondRadioBoxListItem {
        width: auto;
      }
    }
  
    .MatchImportDialogCntrConfig {
      height: 48px;
      display: flex;
      gap: 32px;
    }
  
    .MatchImportOpenAIDialogPreview {
        display: flex;
        gap: 32px;
        flex-direction: row;

        .MatchImportDialogCntrConfig {
            height: auto;
            flex-direction: column;
            gap:24px;
        }

        .MatchImportDialogPreviewCntr {
            width: 375px;
            border: transparent 1px dashed;
            position: relative;
        
            .MatcHint {
              color: $text_color_passive;
              position: absolute;
              width: 60%;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              transition: 0.2s all;
              font-size: 24px;
              text-align: center;
            }
        }      
    }
  

  
    .MatchImportOpenAIDialogDesktop {
        .MatchImportDialogPreviewCntr {
          width: 520px;
        }
    }
  
   
    .MatchImportOpenAIDialogSimulator {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 4px;
      border: 1px solid hsl(0deg, 0%, 86%);
      position: absolute;
    }
  
}
  
  @keyframes aiRunning {
    0%   {width: 1%;}
    100% {width: 100%}
  }
  